<template>

    <el-card class="box-card">
        <template #header>
            <span><B>学生信息</B></span>
        </template>
        <el-form :model="searchStudentData" :label-position="left" class="demo-form-inline" size="large">
            <el-row>

                <el-col :span="6">
                    <el-form-item label="学生学号">
                        <el-input type="text" v-model="searchStudentData.id" placeholder="请输入学生学号" clearable />
                    </el-form-item>
                </el-col>

                <el-col :span="6" :offset="1">
                    <el-form-item label="所在班级">
                        <el-select v-model="searchStudentData.cid" placeholder="请选择班级">
                            <el-option v-for="item in classesData" :key="item.id" :label="item.cname"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="10" :offset="1">
                    <el-form-item>
                        <el-button type="success" @click="toEditStudent(0)">添加学生</el-button>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-row>

                <el-col :span="6">
                    <el-form-item label="学生姓名">
                        <el-input type="text" v-model="searchStudentData.stuname" placeholder="请输入学生姓名" clearable />
                    </el-form-item>
                </el-col>

                <el-col :span="6" :offset="1">
                    <el-form-item label="学生性别">
                        <el-radio-group v-model="searchStudentData.sex">
                            <el-radio label="男">男</el-radio>
                            <el-radio label="女">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>

                <el-col :span="10" :offset="1">
                    <el-form-item>
                        <el-button type="primary" @click="findStudent">查询学生</el-button>
                        <el-button @click="clearSearchForm">重置查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>

    <el-table border :data="studentData" :header-cell-style="{ borderColor: '#1478ad' }" class="tableth"
        table-layout="auto">
        <el-table-column prop="id" label="学生学号" />
        <el-table-column prop="stuname" label="学生姓名" />
        <el-table-column prop="cname" label="所在班级" />
        <el-table-column prop="sex" label="性别" />
        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="birthday" label="生日" />
        <el-table-column prop="address" label="家庭地址" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" size="small" @click="toEditStudent(scope.row.id)"> 修改 </el-button>
                <el-button type="danger" size="small" @click="delStudent(scope.row.id)"> 删除 </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-card class="box-card">
        <pagination v-model:currentPage="searchStudentData.page" v-model:pageSize="searchStudentData.pageSize"
            :total="total" @pageChange="selectStudentPage"></pagination>
    </el-card>

    <el-dialog v-model="dialogFormVisible" :close-on-press-escape="false" :close-on-click-modal="false"
        :destroy-on-close="true" @close="clearFrom(formDataRef)" :title="editTtitle">
        <el-form :model="student" :rules="rules" ref="student" :label-position="right">
            <el-form-item label="学生学号" prop="id" label-width="150px">
                <el-input v-model="student.id" :disabled="idDisabled" size="large" clearable />
            </el-form-item>
            <el-form-item label="学生姓名" prop="stuname" label-width="150px">
                <el-input v-model="student.stuname" size="large" placeholder="请输入学生姓名" clearable />
            </el-form-item>
            <el-form-item label="学生班级" prop="cid" label-width="150px">
                <el-select v-model="student.cid" size="large" placeholder="请选择班级">
                    <el-option v-for="item in classesData" :key="item.id" :label="item.cname" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="学生性别" prop="sex" label-width="150px">
                <el-radio-group v-model="student.sex" size="large">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="学生年龄" prop="age" label-width="150px">
                <el-input type="number" v-model="student.age" size="large" placeholder="请输入学生年龄" clearable />
            </el-form-item>
            <el-form-item label="学生生日" prop="birthday" label-width="150px">
                <el-input type="date" v-model="student.birthday" size="large" placeholder="请输入学生生日" clearable />
            </el-form-item>
            <el-form-item label="家庭地址" prop="address" label-width="150px">
                <el-input v-model="student.address" size="large" placeholder="请输入家庭地址" clearable />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="editStudent">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>

import Pagination from '../../components/Pagination.vue'
import request from '../../utils/request.js';
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
    name: 'Classes',
    data() {
        return {
            dialogFormVisible: false,
            idDisabled: true,
            left: 'left',
            studentData: [],
            classesData: [],
            total: 0,
            searchStudentData: {
                id: "",
                stuname: '',
                cid: "",
                sex: "",
                page: 1,
                pageSize: 5
            },
            student: {
                id: "",
                stuname: '',
                cid: "",
                sex: "",
                age: "",
                birthday: "",
                address: ""
            },
            rules: {
                stuname: [
                    { required: true, message: '请输入学生姓名', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                cid: [
                    { required: true, message: '请选择学生班级', trigger: 'blur' },
                ],
                sex: [
                    { required: true, message: '请选择学生性别', trigger: 'blur' },
                ],
                age: [
                    { required: true, message: '请输入学生年龄', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            if (value < 1 || value > 120) {
                                callback(new Error('年龄必须在1到120之间'));
                            } else {
                                callback();
                            }
                        }, trigger: 'blur'
                    }
                ],
                birthday: [
                    { required: true, message: '请输入学生生日', trigger: 'blur' },
                    { type: 'date', message: '请选择有效的日期', trigger: 'blur' }

                ],
                address: [
                    { required: true, message: '请输入家庭地址', trigger: 'blur' },
                    { min: 5, max: 100, message: '长度在 5 到 100 个字符', trigger: 'blur' }
                ]
            },

        }
    },
    mounted() {
        this.selectStudentPage();
        this.selectClasses();
    },
    methods: {
        //获取班级列表数据
        selectStudentPage() {
            // 发送POST请求获取学生列表数据
            request.post("/student/selectStudentPage", this.searchStudentData).then(response => {
                // 将返回的班级数据赋值给studentData变量
                this.studentData = response.data.data.records;
                // 将返回的总记录数赋值给total变量
                this.total = response.data.data.total;
            }).catch(error => {
                // 打印错误信息到控制台
                console.log(error);
                // 显示错误提示消息
                ElMessage({
                    type: 'error',
                    message: '查询失败！',
                })
            });
        },
        //查获取班级列表数据
        selectClasses() {
            // 发送POST请求获取学生列表数据
            request.get("/classes/selectClass").then(response => {
                // 将返回的班级数据赋值给classessData变量
                this.classesData = response.data.data;
            }).catch(error => {
                // 打印错误信息到控制台
                console.log(error);
                // 显示错误提示消息
                ElMessage({
                    type: 'error',
                    message: '查询失败！',
                })
            });
        },
        //查找学生数据
        findStudent() {
            this.searchStudentData.page = 1;
            this.selectStudentPage();
        },
        //清空搜索表单
        clearSearchForm() {
            const initialData = this.$options.data.call(this);
            Object.assign(this.searchStudentData, initialData.searchStudentData);
            this.findStudent();
        },
        //删除学生
        delStudent(id) {
            ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request.delete("/student/deleteStudent/" + id).then(response => {
                    if (response.data.status = 200) {
                        this.selectStudentPage();
                        ElMessage({
                            type: 'success',
                            message: '删除成功！',
                        })
                    } else {
                        ElMessage({
                            type: 'error',
                            message: '删除失败！',
                        })
                    }
                }).catch(error => {
                    console.log(error);
                    ElMessage({
                        type: 'error',
                        message: '删除失败！',
                    })
                });
            })
        },
        //清空添加修改表单
        clearFrom() {
            const initialData = this.$options.data.call(this);
            Object.assign(this.student, initialData.student);
        },
        //去添加修改学生
        toEditStudent(flag) {
            this.dialogFormVisible = true;
            this.editTtitle = "添加学生信息";
            if (flag != 0) {
                console.log(flag);
                // 发送请求获取学生信息
                request.get("/student/selectStudentById/" + flag).then(response => {
                    // 将返回的学生数据赋值给student变量
                    this.student = response.data.data;
                }).catch(error => {
                    // 打印错误信息到控制台
                    console.log(error);
                    // 显示错误提示消息
                    ElMessage({
                        type: 'error',
                        message: '查询失败！',
                    })
                });
                this.editTtitle = "编辑学生信息";
            }
        },
        //编辑学生信息
        editStudent() {
            this.$refs.student.validate((valid) => {
                if (valid) {
                    if (this.student.id == 0) {
                        request.post("/student/addStudent", this.student).then(response => {
                            if (response.data.status = 200) {
                                this.selectStudentPage();
                                this.dialogFormVisible = false;
                                ElMessage({
                                    type: 'success',
                                    message: '添加成功！',
                                })
                            } else {
                                ElMessage({
                                    type: 'error',
                                })
                            }
                        })
                    } else {
                        request.put("/student/updateStudent", this.student).then(response => {
                            if (response.data.status = 200) {
                                this.selectStudentPage();
                                this.dialogFormVisible = false;
                                ElMessage({
                                    type: 'success',
                                    message: '修改成功！',
                                })
                            } else {
                                ElMessage({
                                    type: 'error',
                                })
                            }
                        })
                    }
                } else {
                    console.log('验证失败！');
                    return false;
                }
            });
        },
    },
    components: {
        pagination: Pagination //分页组件
    }
}
</script>

<style scoped>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-card {
    border: 1px solid #1c88cf;
    border-radius: 3px;
    width: 99%;
    margin-top: 5px;
}

::v-deep .el-card__header {
    background: #1c88cf;
    height: 50px;
    color: #fff;
    text-align: left;
}

.el-table {
    --el-table-border-color: #1c88cf;
    border-radius: 3px;
    width: 99%;
    margin-top: 5px;
}

.el-table ::v-deep th.el-table__cell {
    height: 46px;
    background-color: #1c88cf;
    background: #1c88cf;
    color: #fff;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>